<template>
    <div class="main">
        <div class="main-header flex jus-b" v-if="buttons.length">
            <div>
                <el-button v-if="findButton('添加')" type="primary" @click="$router.push('/addprogram')">添加</el-button>
                <el-button v-if="findButton('导出')" type="primary"
                    :disabled="'delete' | formatDisabled(selection)">导出</el-button>
                <el-button v-if="findButton('删除')" type="danger" :disabled="'delete' | formatDisabled(selection)"
                    @click="deleteProgram">删除</el-button>
            </div>
            <div class="flex">
                <el-form :inline="true">
                    <el-form-item prop="quick_search"><el-input v-model="searchParamOrigin.quick_search" placeholder="请输入标题名称搜索"></el-input></el-form-item>
                    <el-form-item prop="cate_id">
                        <el-select clearable v-model="searchParamOrigin.cate_id" placeholder="请选择分类进行筛选">
                            <el-option v-for="(item,index) in project_type_list" :key="`project_type_list_${index}`" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="status">
                        <el-select clearable style="width:200px" v-model="searchParamOrigin.status" placeholder="请选择项目状态进行筛选">
                            <el-option v-for="(item,index) in status_list" :key="`status_item_${index}`" :label="item" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="quick_search">
                        <el-date-picker v-model="searchParamOrigin.search_time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-button @click="search">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </el-form>
            </div>
        </div>
        <el-table :data="list" border header-cell-class-name="main-table-header" ref="table" class="main-table"
            height="100%" row-key="id" default-expand-all @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column width="100px" label="项目ID" prop="id"></el-table-column>
            <el-table-column width="100px" label="项目分类" prop="projectCate[name]"></el-table-column>
            <el-table-column width="180px" label="项目名称" prop="project_name"></el-table-column>
            <el-table-column width="100px" label="负责人" prop="project_manager"></el-table-column>
            <el-table-column width="120px" label="负责人手机号" prop="manager_mobile"></el-table-column>
            <el-table-column width="150px" label="项目立项图书" prop="manager_mobile">
                <template slot-scope="{row}">
                    <el-image @click.stop="$preview(row.project_img)" style="width: 80px;height: 80px;"
                        :src="row.project_img" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column width="150px" label="中标通知书附件" prop="manager_mobile">
                <template slot-scope="{row}">
                    <el-image @click.stop="$preview(row.biding_img)" style="width: 80px;height: 80px;" :src="row.biding_img"
                        fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="项目状态" prop="status" width="120px">
                <template slot-scope="{row}">
                    {{ row.status == 0 ? '进行中' : row.status == 1 ? '未结算' : row.status == 2 ? '已结算' : '' }}
                </template>
            </el-table-column>
            <el-table-column>
                <template slot-scope="{row}">
                    <el-button type="primary" v-if="findButton('编辑')"
                        @click.stop="$router.push(`/addprogram?edit=true&id=${row.id}`)">编辑</el-button>
                    <el-button type="primary" v-if="$getRouteAuth('/demand').get('add')"
                        @click="$router.push('/senddemand?project_id=' + row.id)">创建需求单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
            @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
    </div>
</template>
<script>

export default {
    data() {
        return {
            addShow: false,
            list: [],
            selection: [],
            project_type_list:[],
            total: 0,
            limit: 20,
            page: 1,
            status_list:['进行中','未结算','结算中','已结算'],
            searchParam:{
                quick_search:'',
                cate_id:'',
                search_time:[],
                status:''
            },
            searchParamOrigin:{}
        }
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    created() {
        this.getList()
        this.getProjectTypeList()
    },
    methods: {
        search(){
            this.searchParam = {...this.searchParamOrigin}
            this.getList()
        },
        resetSearch(){
            this.searchParam = this.$options.data().searchParam
            this.searchParamOrigin = this.$options.data().searchParam
        },
        async getProjectTypeList(){
            let res = await this.$post({
                url:'/admin/project.projectCate/index',
            })
            this.project_type_list = res.list
        },
        async getList() {
            let res = await this.$get({
                url: "/admin/project.Project/index",
                loading: true,
                params:{
                    page:this.page,
                    limit:this.limit,
                    ...this.searchParam,
                    search_time:this.searchParam.search_time?this.searchParam.search_time.join(' - '):''
                }
            })
            this.total = res.total
            this.list = res.list
            console.log(this.list)
        },
        deleteProgram() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个项目, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await this.$del({
                        url: "/admin/project.Project/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getList();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onCurrentChange(index) {
            this.page = index;
            this.getList()
        },
        tapButton(e) {
            switch (e.name) {
                case 'add':
                    this.$router.push('/addprogram')
                    break;
                case 'delete':
                    this.deleteProgram()
                    break;
                default:
                    console.log('default')
                    break;
            }
        },

    }
}
</script>
<style lang="less"></style>